<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>圣杯布局和双飞翼布局</title>
  <style>
    body{
      padding:0;
      margin:0;
    }    
    /* 圣杯布局 三栏的父盒子设置左右padding给左右栏留出位置 */
    /* 双飞翼布局 去掉三栏的父盒子设置的padding */
    .body{
      padding: 0 200px;
      height: 150px;
    }
    .fly-body{
      height: 150px;
    }
    .left-com{
      float:left;
      margin-left: -100%;
      width: 200px;
      height: 100%;
      background-color: green;
    }
    .right-com{
      float:left;
      margin-left: -200px;
      width: 200px;
      height: 100%;
      background-color: blue;
    }
    .center{
      float:left;
      width: 100%;
      height: 100%;
      background-color: orange;
    }
    /* 圣杯布局 左右两栏利用相对定位移动到父盒子用padding留出的位置 */
    /* 双飞翼布局 去掉left和right左右栏的相对定位属性 */
    .left{
      position: relative;
      left:-200px;
    }
    .right{
      position: relative;
      right:-200px;
    }
    /* 双飞翼布局 中间栏center的子盒子 设置padding或者margin给左右栏留出位置 */
    .inner{
      padding: 0 200px;
      height: 100%;
      background-color: pink;
    }
    /* 双飞翼不用中间加一个盒子，用这个方法也可以，不过box-sizing是css3出来后才有的 */
    .fly-center {
      padding: 0 200px;
      box-sizing: border-box;
    }

  </style>
</head>
<body>
  <p>圣杯布局</p>
  <div class="body">
    <div class="center">Center</div>
    <div class="left left-com">Left</div>
    <div class="right right-com">Right</div>
  </div>
  <p>双飞翼布局</p>
  <div class="fly-body">
    <div class="center fly-center">      
      <!-- 双飞翼布局 中间栏center里加一个子盒子放置内容 -->
      <!-- <div class="inner">Center</div> -->
    </div>
    <div class="left-com">Left</div>
    <div class="right-com">Right</div>
  </div>
</body>
</html>

<!--
  结构和样式思路详解：
    圣杯布局
      1. 首先从DOM结构上讲，由于中间栏主要内容要优先渲染，所以放在left和right的前面。
        然后从样式来讲，由于中间栏自适应屏幕大小变化，所以宽度设置为100%。再将左中右三个盒子设float浮动，但由于中间栏宽度100%，所以左右两栏掉下来了。
      2. 把左栏left设置margin负200后，发现left上去了，因为往左就是屏幕之外没有位置了，只能往上挪。那么根据这个方法，利用负margin将左右两栏放上去。
      3. 这时三栏处在一排了，但是中间栏两边的内容被挡住了，于是给外层父盒子设左右padding，给左右栏留位置
      4. 但是加了padding后，左右栏也缩进来了，于是利用position:relative相对定位将左右栏定位到左右padding的位置
    双飞翼布局
      1. 从DOM上来讲，在center中加一个子盒子，用来放置内容
      2. 从样式来讲，去掉三栏的父盒子的左右padding，去掉left和right左右栏的相对定位设置，
        给center子盒子设置左右margin或者padding留出左右栏位置
-->

<!--
  圣杯布局和双飞翼布局的区别
    相同之处：
      1. 都是三栏布局，都是左右盒子宽度固定，中间盒子自适应的结构，又叫固比固结构，并且中间主要内容优先渲染
      2. 解决问题的方案在前一半是相同的，即：
        a. 中间栏宽度设置为100%
        b. 三栏全部float浮动
        c. 左右两栏加上负margin让其跟中间栏并排，以形成三栏布局
    不同之处：
      在于解决中间栏内容不被遮挡问题的思路不一样
      圣杯布局：
        a. 将三栏的父盒子设置左右padding
        b. 将左右两个盒子设置position:relative，并配合left和right属性，相对自身移动到左右的padding中
      双飞翼布局：
        a. 在中间栏盒子里加一个子盒子用于放置内容
        b. 在该子盒子里设置左右margin或者padding用来给左右两栏留出位置
      双飞翼多用一个子盒子，少用几个css属性，并且中间栏盒子Center变成BFC元素了，屏幕宽度缩小Center也不会被挤下去，圣杯布局就会被挤下去。
-->
